<template>
    <div>
        <svg-icon icon-class="message" @click="goto" />
        <div v-show="true" id="badge">5</div>
    </div>
</template>

<script>
export default {
    name: "message",
    data() {
        return {
            url: "",
        };
    },
    methods: {
        goto() {
            this.$router.push({ path: "/chat/im" });
        },
    },
};
</script>
<style scoped>
#badge {
    width: 20px;
    height: 20px;
    line-height: 20px; /* 数值与height相同，使数字垂直居中 */
    text-align: center; /* 使数字水平居中 */
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%; /* 使正方形变圆形，矩形变椭圆形 */
    position: relative;
    bottom: 45px;
    left: 12px;
}
</style>